<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>卡片</title>
    <!-- 引入Element UI的CSS文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
      <div style="width: 200px;height: 200px">
          <el-card>
              <h1>这是卡片</h1>
          </el-card>
      </div>
      <el-row gutter="10">
          <el-col span="4" v-for="i in 6">
              <el-card><h1>卡片{{i}}</h1></el-card>
          </el-col>
      </el-row>
      <h1>商品列表</h1>
      <el-row gutter="20">
          <el-col span="6" v-for="product in arr">
              <el-card>
                  <img :src="product.url" width="100%">
                  <p>{{product.title}}</p>
                  <p>
                      <span>价格:{{product.price}}</span>
                      <span style="float: right">销量:{{product.sales}}</span>
                  </p>
              </el-card>
          </el-col>
      </el-row>
  </div>
  <!-- 引入Vue的js文件 -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- 引入Element UI的js文件 -->
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
  <script>
    let v = new Vue({
      el : "#app",
      data : function() {
        return {
            arr: [{url: "../image/a.jpg", title: "牛仔裤", price: 300, sales: 20},
                {url: "../image/b.jpg", title: "白色卫衣", price: 200, sales: 30},
                {url: "../image/c.jpg", title: "灰色运动裤", price: 500, sales: 50},
                {url: "../image/d.jpg", title: "黑色帽衫", price: 600, sales: 70}]
        }
      },
      methods : {

      }
    })
  </script>
</body>
</html>